<template>
  <div ref="chart" id="weekStatistics" style="height: 450px;width: 500px"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import {getRecords} from "@/api/Data";

onMounted(() => {
  getData()
})

const rawData = ref([])

function getData() {
  getRecords().then((response: any) => {
    rawData.value = response.data
    getChart()
  })
}

function getChart() {
  const weekDayMap = processData();
  type EChartsOption = echarts.EChartsOption
  var chartDom = document.getElementById('weekStatistics')!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;

  option = {
    title: {
      text: '按一周中的日期列出的访问计数',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: Object.keys(weekDayMap)
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: 'Access Count',
      type: 'bar',
      data: Object.values(weekDayMap),
      emphasis: {
        itemStyle: {
          color: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  };

  option && myChart.setOption(option);

}

function processData() {
  const weekDayMap = {
    'Sunday': 0,
    'Monday': 0,
    'Tuesday': 0,
    'Wednesday': 0,
    'Thursday': 0,
    'Friday': 0,
    'Saturday': 0
  } as any;

  const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

  rawData.value.forEach((item:any) => {
    const date = new Date(item.accessTime);
    const day = weekDays[date.getDay()];
    weekDayMap[day] += item.count;
  });

  return weekDayMap;
}

</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>
